import React, { useRef } from "react";
import { Animated, View, StyleSheet, PanResponder, Text } from "react-native";

const NewSlider = () => {
  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pan.setOffset({
          x: pan.x._value
        });
      },
      onPanResponderMove: Animated.event(
        [
          null,
          { dx: pan.x },
        ],
        { useNativeDriver: false }
      ),
      
      onPanResponderRelease: () => {
        pan.flattenOffset();
      }
    })
  ).current;

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          {
            transform: [{ translateX: pan.x }]
          },
          pan.getLayout(),
          styles.boxLeft
        ]}
        {...panResponder.panHandlers}>
      </Animated.View>
      <Animated.View
        style={[
          {
            transform: [{ translateX: pan.x }]
          },
          pan.getLayout(),
          styles.boxRight
        ]}
        {...panResponder.panHandlers}>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 8,
    backgroundColor: '#707070',
    borderRadius: 8,
    marginVertical: 39,
    position: 'relative'
  },
  boxLeft: {
    height: 40,
    width: 40,
    backgroundColor: "#fff",
    borderWidth: 2,
    borderColor: 'rgb(0, 0, 0)',
    borderRadius: 40,
    position: 'absolute',
    left: 0,
    top: -20
  },
  boxRight: {
    height: 40,
    width: 40,
    backgroundColor: "#fff",
    borderWidth: 2,
    borderColor: 'rgb(0, 0, 0)',
    borderRadius: 40,
    position: 'absolute',
    left: 100,
    top: -20
  }
});

export default NewSlider;